<template>
  <!-- 消息列表 -->
  <div style="padding:20px 20px;" >
    <el-card class="xiu_box">
      <div style="width:100%;height:40px;">
        <el-select v-model="$store.state.user.sai.state" placeholder="请选择" @change="$store.state.user.sai.pageNo=1;git_act()">
             <el-option label="所有消息" value=""></el-option>
             <el-option label="未读消息" value="false"></el-option>
             <el-option label="已读消息" value="true"></el-option>
        </el-select>
        <el-select v-model="$store.state.user.sai.typeId" clearable placeholder="请选择消息类型" @change="$store.state.user.sai.pageNo=1;git_act()">
             <el-option v-for="item in $store.state.user.msgtype" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
      <el-table v-loading="loading" :data="$store.state.user.messagebox"　 @row-click="xiang" style="width:100%;margin-top:20px;">
        <el-table-column header-align='center' align='center' prop="typeId" label="消息类型" >
          <template slot-scope="scope">{{id_name(scope.row.typeId,$store.state.user.msgtype)}}</template>
        </el-table-column>
        <el-table-column header-align='center' align='center' prop="message" label="内容" show-overflow-tooltip>
          <template slot-scope="scope">{{JSON.parse(scope.row.message).detail}}</template>
        </el-table-column>
        <el-table-column header-align='center' align='center' prop="releasedTime" label="接收时间" ></el-table-column>
        <el-table-column header-align='center' align='center' prop="" label="状态" show-overflow-tooltip>
          <template slot-scope="scope"><a :style="{color:scope.row.state==false?'#F56C6C':'#909399'}">{{scope.row.state?'已读':'未读'}}</a></template>
        </el-table-column>
        <el-table-column header-align='center' align='center' width="170" label="操作">
          <template slot-scope="scope">
            <el-button @click.stop="delect(scope.row)" :disabled="scope.row.state==false" type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination :current-page='$store.state.user.sai.pageNo' v-show='$store.state.user.totals>15' style='margin-top:35px;width:100%;text-align:center;'
                     background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="ye_s"
                     :page-size="$store.state.user.sai.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="$store.state.user.totals">
      </el-pagination>
    </el-card>
    <mssage :datas="datas" ref="mssage"></mssage>
  </div>
</template>
<script>
  import { query,send,noticeread,messageread,noticedelete,messagedelete } from '@/api_bast/mssage.js'
  import mssage from '../../components/MES/mssage'
  export default {
    components: {mssage},//声明子组件
    computed:{},
    data(){
      return {
        datas:{},
        loading:false,
        ye_s:[15,20],
      }
    },
    methods:{
      xiang(row,column,event){//查看详情
          this.datas = row;
          this.$refs.mssage.fan();
          if(row.state){return false};
        if(row.typeId==4) {//公告消息 调用已读接口
          noticeread(this.json_object(this.resData()).id,{id:row.id}).then(response => {
            this.git_act();
          });
        }else{
          messageread(row.id).then(response => {
            this.git_act();
          });
        }
      },
      delect(item){//删除消息
        this.loading=true;
        if(item.typeId==4){//公告消息
          noticedelete(item.id).then(response => {
            this.git_act();
            this.loading = false;
          })
        }else{
          messagedelete(item.id).then(response => {
            this.git_act();
            this.loading = false;
          })
        }
      },
      git_act(){//获取数据列表
        this.loading=true;
        this.$store.state.user.sai.userId = this.json_object(this.resData()).id;
        query(this.$store.state.user.sai).then(response => {
          this.loading = false;
          if(!response.resData){return false;}
          this.$store.state.user.totals = response.resData.total;
          this.$store.state.user.messagebox = response.resData.list;
        })
      },
      handleCurrentChange(val) {//点击页数
        this.$store.state.user.sai.pageNo = val;
        this.git_act();
      },
      handleSizeChange(val) {//点击条数
        this.$store.state.user.sai.pageSize = val;
        this.git_act();
      },
    },
    mounted(){
      this.git_act();//获取数据
    },
  }
</script>

<style scoped="scoped">
  .xiu_box{width: 100%;}
  .btn{padding:10px 5px;}
</style>
